import React, { useEffect, useState } from 'react';
import {View, Image, Block} from '@tarojs/components'
import {gotoPage} from '../../utils/tools'
import {TARO_ENV} from "../../constants/api";
import '../main-menu/main-menu.scss'

interface NavItem {
  ishide: any
  img: string
  url: string
  name: string
}

const MainMenu: React.FC<{ data: NavItem[]; index?: any; customClass?: any; offsetTop?: any }> = (props) => {
  const [dataLength, setDataLength] = useState(0)
  const [width, setWidth] = useState('')
  useEffect(() => {
    setWidth(100 / props.index + '%');
    setDataLength(props.data.length)
  }, [props.data, props.index])
  return (
    <View className={`${props.customClass || ''} ${process.env.P_ENV === 'kd' && 'main-menu-card'} ${TARO_ENV + (props.customClass || '')}`}>
      <View className={dataLength <= 5 ? "main-menu-flex" : "main-menu"} style={`top: ${props.customClass && props.customClass === 'headerMenusBox' && props.offsetTop}px`}>
        {props.data.length > 0 && props.data.map((item, index) => <Block key={index}>{(!item.ishide && item.ishide != 1) &&
        <View
          style={`width: ${width} !important;`}
          className='item'
          onClick={() => gotoPage(item.url)}
        >
          <View className='img'><Image src={item.img} mode='aspectFit' style='width:100%;height:100%' /></View>
          <View className={item.name.length > 5 ? 'title-new' : 'title'}>{item.name}</View>
        </View>}
        </Block>)}
      </View>
    </View>
  )
}

MainMenu.defaultProps = {
  data: []
}

export default MainMenu
